<template>
	<view class="technician-account-bind" :style="{background:pageColor}" v-if="isLoad">
		<!-- #ifndef MP-WEIXIN -->
		<view class="space-md"></view>
		<view @tap.stop="toEditAccount(1)" class="ml-md mr-md pd-lg fill-base list-item flex-warp radius-16">
			<view class="item-icon alipay flex-center">
				<i class="iconfont icon-alipay-fill icon-font-color"></i>
			</view>
			<view class="flex-1 ml-md">
				<view class="flex-y-center f-paragraph text-bold">支付宝账号绑定</view>
				<view class="flex-between">
					<view class="f-caption c-paragraph">
						{{userAccountInfo.alipay_number ? userAccountInfo.split_alipay_number : '暂无'}}
					</view>
					<view class="flex-y-center f-desc" :style="{color:primaryColor}" v-if="coachInfo.user_id">
						{{userAccountInfo.alipay_number?'修改':'去设置'}}<i class="iconfont icon-right text-bold"></i>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="space-md"></view>
		<view @tap.stop="toEditAccount(2)" class="ml-md mr-md pd-lg fill-base list-item flex-warp radius-16"
			v-if="configInfo.plugAuth.adapay||configInfo.plugAuth.heepay">
			<view class="item-icon card flex-center">
				<i class="iconfont iconcard icon-font-color"></i>
			</view>
			<view class="flex-1 ml-md">
				<view class="flex-y-center f-paragraph text-bold">银行卡账号绑定</view>
				<view class="flex-between">
					<view class="flex-y-center f-caption c-paragraph">
						{{userAccountInfo.bank_card_id ? userAccountInfo.split_card_id : configInfo.plugAuth.heepay?'请联系平台添加':'暂无'}}
						<view class="ml-md" :class="[colorType[userAccountInfo.bank_status]]"
							v-if="userAccountInfo.bank_card_id">
							{{adapayStatusType[userAccountInfo.bank_status]}}
						</view>
					</view>
					<view class="flex-y-center f-desc" v-if="configInfo.plugAuth.adapay">
						<view class="flex-y-center c-warning mr-md" @tap.stop="toDelBanck" :style="{color:subColor}"
							v-if="userAccountInfo.bank_card_id && userAccountInfo.bank_status != 0">
							删除<i class="iconfont icon-del text-bold"></i>
						</view>
						<view class="flex-y-center" :style="{color:primaryColor}"
							v-if="coachInfo.user_id&&(!userAccountInfo.bank_card_id || (userAccountInfo.bank_card_id && userAccountInfo.bank_status != 0))">
							{{userAccountInfo.bank_card_id ?'修改':'去设置'}}<i class="iconfont icon-right text-bold"></i>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				isLoad: false,
				adapayStatusType: {
					0: '审核中',
					1: '审核通过',
					2: '审核失败'
				},
				colorType: {
					0: 'c-alipay',
					1: 'c-success',
					2: 'c-warning'
				},
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			userAccountInfo: state => state.user.userAccountInfo,
		}),
		onLoad() {
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			this.initIndex()
		},
		methods: {
			...mapActions(['getConfigInfo', 'getCoachAccount']),
			...mapMutations(['updateUserItem']),
			async initIndex(refresh = false) {
				await this.getCoachAccount()
				this.isLoad = true
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.initIndex(true)
			},
			toEditAccount(type) {
				let {
					adapay
				} = this.configInfo.plugAuth
				let {
					user_id
				} = this.coachInfo
				if ((type == 2 && !adapay) || !user_id) return
				this.$util.goUrl({
					url: type == 1 ? `/user/pages/alipay-account` : `/user/pages/bank-account`
				})
			},
			async toDelBanck() {
				let [res_del, {
					confirm
				}] = await uni.showModal({
					content: `请确认是否要删除银行卡？`,
				})
				if (!confirm) return
				await this.$api.mine.memberStatusUpdate({
					status: -1
				})
				this.$util.showToast({
					title: `删除成功`
				})
				await this.getCoachAccount()
			},
		}
	}
</script>

<style lang="scss">
	.technician-account-bind {
		.list-item {

			.item-icon {

				width: 70rpx;
				height: 70rpx;
				border-radius: 35rpx;

				.iconfont {
					font-size: 44rpx;
				}
			}


			.item-icon.alipay {
				background: #E9F5FE;

				.iconfont {
					background-image: linear-gradient(180deg, #46BCFF 0%, #2587FF 100%, #1976FF 100%);
				}
			}

			.item-icon.card {
				background: #FDF3EB;

				.iconfont {
					background-image: linear-gradient(180deg, #F89146 0%, #F99146 100%, #F98146 100%);
				}
			}

			.f-paragraph {
				height: 70rpx;
				color: #2E3541
			}

			.icon-del {
				font-size: 24rpx;
				margin-left: 5rpx;
			}

			.icon-right {
				font-size: 22rpx;
			}
		}
	}
</style>